<template>
    <div>
        <div style="display: flex;">
            <!-- 左侧 -->
            <div style="width: 100px;">
                <van-sidebar v-model="active">
                    <van-sidebar-item :title="item.cat_name" v-for="item in sidebar" />
                </van-sidebar>
            </div>
            <!-- 右侧 -->
            <div style="flex: 1;">
                <div style="width: 100%;">
                    <div v-for="item in sidebar[active]?.children">
                        <h2>{{ item.cat_name }}</h2>
                        <van-grid :column-num="3">
                            <van-grid-item v-for="value in item.children" :key="value" :icon="value.cat_icon"
                                :text="value.cat_name" @click="pushgoods(value.cat_id)" />
                        </van-grid>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from '../../request'
//引入路由
import {useRouter,useRoute} from 'vue-router'
//实例化
const router=useRouter()
const route=useRoute()
const active = ref(0);
//分类----------------------------------
const sidebar = ref([])
const sidebarinit = (cid) => {
    axios.get("https://api-hmugo-web.itheima.net/api/public/v1/categories", {
        params: {
            cid
        }
    }).then((res) => {
        console.log('分类', res)
        sidebar.value = res
    })
}
sidebarinit()
//点击跳转至二级分类
const pushgoods = (cid) => {
    router.push({
        path: '/goods',
        query: {
            cid
        }
    })
}
</script>

<style lang="scss" scoped></style>